<template>
  <el-dialog title="保存配置" :visible.sync="saveSettingModalShow" :width="modalWidth">
    <el-row :gutter="20">
      <el-col :span="8" class="lable">
        配置名称:
      </el-col>
      <el-col :span="14">
        <el-input
          placeholder="请输入配置名称"
          v-model="name">
        </el-input>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button @click="saveSettingModalShow = false">取 消</el-button>
      <el-button type="primary" @click="saveSettings">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {mapState} from "vuex";

  export default {
    name: "SaveSettingModal",
    computed: {
      ...mapState(["modalWidth"]),
      saveSettingModalShow: {
        get() {
          return this.$store.getters.saveSettingModalShow;
        },
        set(flag) {
          this.$store.dispatch("saveSettingModalShow", flag);
        }
      }
    },data(){
      return {
        name:"新建配置"
      }
    },methods:{
      saveSettings(){
        this.$store.dispatch("saveSettings",this.name);
        this.$store.dispatch("saveSettingModalShow", false);
      }
    }
  }
</script>

<style scoped>
  .lable {
    padding: 10px;
    text-align: right;
  }
  .el-input{
    width: 80%;
  }
</style>
